<template>
  <div class="container">
      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
        <x-header :left-options="{showBack: false}" class="my-header" title="Hello护士" ></x-header>
        <div class="container">
          <div class="swiper">
            <swiper :list="demo03_list" auto style="margin:0 auto;" height="180px" dots-position="center"></swiper>
          </div>
          <p class="title">常用服务项目</p>
          <div class="service_item">
            <flexbox :gutter="0" v-for="(item,index) in servicelist">
              <flexbox-item><router-link :to="{path:'/order_details',query:{normalSid:item.normalSid,highSid:item.highSid,icon:item.icon}}">
                <div class="flex-demo">
                  <span class="icon" :class="item.icon"></span>
                  <h4 class="item_title">{{item.name}}</h4>
                  <div class="item_des">{{item.description}}</div>
                </div></router-link></flexbox-item>
            </flexbox>
          </div>
          <divider>没有更多内容了</divider>
        </div>
        <tabbar slot="bottom" id="tabbar">
          <tabbar-item :link="{path:'/',replace:true}" selected>
            <img slot="icon" src="../assets/home@3x.png">
            <span slot="label">主页</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/service_item',replace:true}">
            <img slot="icon" src="../assets/nurse@3x.png">
            <span slot="label">护士上门</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/user_center',replace:true}">
            <img slot="icon" src="../assets/me_def@3x.png">
            <span slot="label">个人中心</span>
          </tabbar-item>
        </tabbar>
      </view-box>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem,Swiper, GroupTitle, SwiperItem, XButton, Divider,XHeader, Tabbar, TabbarItem, ViewBox, Drawer } from 'vux'
  const imgList = [
    "http://public-1254105675.coscd.myqcloud.com/orderff8080815eb94560015ebd0972110000_1517598887000/1.jpg",
    'http://public-1254105675.coscd.myqcloud.com/orderff8080815eb94560015ebd0972110000_1517598887000/2.jpg',
  ]
  const demoList = imgList.map((one, index) => ({
    url: 'javascript:',
    img: one
  }))
  export default {
    data() {
      return {
        title:'',
        showMenu: false,
        demo03_list: demoList,
        servicelist:[]
      }
    },
    mounted(){
      this.initdata()
    },
    methods:{
      initdata(){
        let data={
          index:0,
          count:20
        }
        let self=this
        this.Ajax('post','/Mall/ServiceList/serviceAll',data,function(data){
          data=data.dataList
          let list=[5]
          data.forEach((item)=>{
            if(item.name=='肌肉注射'){
              item.icon="visit_1"
              item.description="上门注射黄体酮、排卵针等药物"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[0]=item;
            }else if(item.name=='静脉输液'){
              item.icon="visit_2"
              item.description="专业护士上门提供营养液、氨基酸等药物输液"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[2].sid
              item.comp_normalSid=item.serviceList[1].sid
              item.comp_highSid=item.serviceList[3].sid
              list[1]=item
            }else if(item.name=='皮下注射'){
              item.description="上门注射胸腺肽、HPV疫苗等药物"
              item.icon="visit_5"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[2]=item
            }else if(item.name=='静脉采血'){
              item.description="常规产检、体检或特殊检查的上门采血"
              item.icon="visit_8"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[3]=item
            }else if(item.name=='尿管护理'){
              item.description="拔尿管、插尿管、更换尿袋"
              item.icon="visit_9"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[4]=item
            }else if (item.name=="胃管护理"){
              item.description="更换胃管、鼻腔输入营养液及药物指导"
              item.icon="visit_11"
              item.normalSid=item.serviceList[0].sid
              item.highSid=item.serviceList[1].sid
              list[5]=item
            }
          })
          self.servicelist=list
        })
      },
      listenTitle:function(data){
        this.title=data
      }
    },
    components: {
      XHeader,
      Tabbar,
      TabbarItem,
      ViewBox,
      Drawer,
      Flexbox,
      FlexboxItem,
      Divider,
      Swiper,
      SwiperItem,
      GroupTitle,
      XButton,
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="stylus" rel="stylesheet/stylus">
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .title{
    font-size: 15px;
    margin: 18px 0px 18px 10px;
    font-weight: bold;
  }
  .service_item{
    width: 95%;
    margin: 0 auto;
  }
  .flex-demo{
    height: 70px;
    margin: 0 0 5px 0px;
    background-color: white;
  }
  .icon
    display: inline-block;
    float left
    margin: 10px 5px 15px 20px;
    width: 50px;
    height: 50px;
    background-size: 45px 45px;
    background-repeat: no-repeat;
    &.visit_1
      background-image url('mainpage/icons/visit/visit_1.imageset/visit_1.png')
    &.visit_2
      background-image url('mainpage/icons/visit/visit_2.imageset/visit_2.png')
    &.visit_3
      background-image url('mainpage/icons/visit/visit_3.imageset/visit_3.png')
    &.visit_4
      background-image url('mainpage/icons/visit/visit_4.imageset/visit_4.png')
    &.visit_5
      background-image url('mainpage/icons/visit/visit_5.imageset/visit_5.png')
    &.visit_6
      background-image url('mainpage/icons/visit/visit_6.imageset/visit_6.png')
    &.visit_7
      background-image url('mainpage/icons/visit/visit_7.imageset/visit_7.png')
    &.visit_8
      background-image url('mainpage/icons/visit/visit_8.imageset/visit_8.png')
    &.visit_9
      background-image url('mainpage/icons/visit/visit_9.imageset/visit_9.png')
    &.visit_10
      background-image url('mainpage/icons/visit/visit_10.imageset/visit_10.png')
    &.visit_11
      background-image url('mainpage/icons/visit/visit_11.imageset/visit_11.png')
    &.visit_12
      background-image url('mainpage/icons/visit/visit_12.imageset/visit_12.png')
    &.visit_13
      background-image url('mainpage/icons/visit/visit_13.imageset/visit_13.png')
    &.visit_14
      background-image url('mainpage/icons/visit/visit_14.imageset/visit_14.png')
    &.visit_15
      background-image url('mainpage/icons/visit/visit_15.imageset/visit_15.png')
    &.visit_16
      background-image url('mainpage/icons/visit/visit_16.imageset/visit_16.png')
    &.visit_17
      background-image url('mainpage/icons/visit/visit_17.imageset/visit_17.png')
    &.visit_18
      background-image url('mainpage/icons/visit/visit_18.imageset/visit_18.png')
  .item_title
    display inline-block
    margin 10px 0 5px 0
    color black
    font-weight bold
  .item_des
    color gray
    font-size 12px
  #tabbar
    position: fixed
</style>
